<template>
  <div class="emailBinding" >
    <!--邮件绑定-->
    <div class="list" @keyup.13="eventshow($event)">
      <ul>
        <li>
          <label>{{lang['basic_postbox']}}</label>
          <input type="text" name="" value=""  v-model="email" ref="email" :placeholder="lang['register_PleaseEnterEmailss']" >
        </li>
        <li>
          <label>{{lang['mailboxVerificationCode']}}</label>
          <input type="text" name="" maxlength="6" value=""  v-model="verifyCode" ref="verifyCode" class="inptYz" :placeholder="lang['register_PleaseerificationCode']">
          <a class="countryAreaNo">
            <span v-if="sendMsgDisabled" style="color:rgba(255,255,255,.7)">{{lang['register_ClickGett']}}({{time}})</span>
            <span v-if="!sendMsgDisabled" v-bind:class="{colorActive: !isSendSMS}" @click="sendEmail">{{lang['register_ClickGet']}}</span>
          </a>
        </li>
        <li>
          <label>{{lang.basic_capitalPassword}}</label>
          <input type="password" name="" value="" v-model="tpwdText" ref="tpwdText" maxlength="6"  :placeholder="lang['pleaseEnterAFundPassword']">
        </li>
        <li>
          <button type="button" class="submitBtn" v-bind:class="{ active: !isSubmitBtnCheck }"  @click="emailshow"> {{lang['determineBth']}}
          </button>
        </li>
      </ul>
    </div>

    <!-- 弹窗 提示-->
    <SwModal :isShow.sync="showModal" :isShowBg="true" modalClass="userModal smallModal" :isCloseOnClickBg="true" :onClosed="onClosed" :okText="lang['determineBth']" :ok="emaileBtndetermine">
      <div class="successfulOperation">
        <p>{{lang['bindingSuccess']}}</p>
      </div>
    </SwModal>
  </div>
</template>
<script>
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import CheckInput from '@/utils/CheckInput.js'
import rules from '@/utils/rules.js'
import Utils from '@/utils/Utils.js'
export default {
  props: [
    'lang',
    'langKey'
  ],
  data () {
    return {
      showModal: false,
      time: 60,
      sendMsgDisabled: false,
      email: '',
      verifyCode: '',
      tpwdText: '',
      isSendSMS: true,
      isSubmitBtnCheck: true
    }
  },
  components: {
    SwModal
  },
  methods: {
    sendEmail () {
      if (!this.isSendSMS) {
        return
      }
      // 检验邮箱是否为空
      this.checkHandle.chackByIdsInOrder(['email'])
      .then((info) => {
        if (!info.isValid) {
          ModalApi.message(info.error(), '', '', 'userModal')
          return
        }
        this.isSendSMS = false
        this.$http.post('Security/SendMailByCode', {
          AreaCode: '',
          VerifyDeviceType: 0,
          VerifyCode: '',
          PhoneOrEmail: this.email,
          BussinessType: 3,
          LanguageCode: this.langKey
        }, {
          modalOptions: {
            modalClass: 'userModal'
          }
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            // 倒计时
            let me = this
            me.sendMsgDisabled = true
            let interval = window.setInterval(() => {
              if ((me.time--) <= 0) {
                me.time = 60
                me.sendMsgDisabled = false
                window.clearInterval(interval)
              }
            }, 1000)
            ModalApi.message(this.lang['VerificationCodeSuccessful'], '', '', 'userModal')
            // 倒计时
          }
          this.isSendSMS = true
        })
      })
      .catch((info) => {
      })
    },
    eventshow (ev) {
      if (ev.keyCode === 13) {
        this.emailshow()
      }
    },
    emailshow () {
      if (!this.isSubmitBtnCheck) {
        return
      }
      // 检验邮箱、 验证码  PIN是否为空
      this.checkHandle.chackByIdsInOrder(['email', 'verifyCode', 'tpwdText'])
      .then((info) => {
        if (!info.isValid) {
          ModalApi.message(info.error(), '', '', 'userModal')
          return
        }
        this.isSubmitBtnCheck = false
        this.$http.post('Security/BindEmail', {
          mail: this.email,
          pin: this.verifyCode,
          tpwd: this.tpwdText
        }, {
          modalOptions: {
            modalClass: 'userModal'
          }
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            this.email = ''
            this.verifyCode = ''
            this.tpwdText = ''
            this.sendMsgDisabled = false
            this.showModal = !this.showModal
          }
          this.isSubmitBtnCheck = true
        })
      })
      .catch((info) => {
      })
    },
    emaileBtndetermine () {
      this.showModal = false
      this.$emit('GetCustomerList')
    },
    onClosed () {

    }
  },
  mounted () {
    let that = this
    this.checkHandle = new CheckInput({
      rules: rules,
      trimValue (val, item) {
        return val.replace(/^\s+|\s+$/, '')
      },
      list: [
        {
          id: 'email',
          input: that.$refs.email,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['register_PleaseEnterEmailss']
              }
            },
            {
              rule: 'email',
              error () {
                return that.lang['register_EmailErr']
              }
            }
          ]
        },
        {
          id: 'verifyCode',
          input: that.$refs.verifyCode,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['register_PleaseerificationCode']
              }
            }
          ]
        },
        {
          id: 'tpwdText',
          input: that.$refs.tpwdText,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['pleaseEnterAFundPassword']
              }
            }
          ]
        }
      ]
    })
  }
}
</script>

<style lang="less">
.emailBinding{
  background: #1A1F2B;
  padding-bottom: 20px;

  .list{
    width: 420px;
    margin: 0 auto;
  }
  .list  li{
    position: relative;
  }

  .list  li label{
    display: block;
    padding: 15px 10px 5px;
    height: 20px;
    line-height: 20px;
    color: #fff;
   }
  .list  li input{
    padding: 0 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: #2A3440;
    color: #fff;
    font-size: 12px;
  }
   .list  li  .inptYz{
    padding-right: 120px;
  }

  .list  li .countryAreaNo {
    position: absolute;
    top: 40px;
    right: 0;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
  }
  .list  li .countryAreaNo span {
    display: block;
    font-size: 12px;
  }
  .list  li .countryAreaNo span.colorActive {
    color: #ccc
  }
  .list  li .countryAreaNo:after{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    display: block;
    height: 20px;
    border-left: solid 1px #B1BBC2;
  }
  .list li .submitBtn {
    display: block;
    margin: 20px auto 0;
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #3782FF;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
  }
  .list  li .submitBtn.active{
    background-color: #2A3441;
    cursor:not-allowed;
  }
}

</style>
